<template>
  <el-form  :model="formInline" class="demo-form-inline">
    <el-form-item label="角色名称">
      <el-input v-model="formInline.name" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="角色类别">
      <el-select
        v-model="formInline.role_type"
        placeholder="请选择角色类别"
        clearable
      >
        <el-option label="系统总管" value="系统总管" />
        <el-option label="系统员工" value="系统员工" />
        <el-option label="系统经理" value="系统经理" />
      </el-select>
    </el-form-item>
    <el-form-item label="范围">
      <el-select
        v-model="formInline.data_scope"
        placeholder="请选择范围"
        clearable
      >
        <el-option label="全部数据" value="1" />
        <el-option label="公司数据" value="2" />
        <el-option label="个人数据" value="8" />
      </el-select>
    </el-form-item>
    <el-form-item label="角色级别">
      <el-select
        v-model="formInline.role_level"
        placeholder="请选择角色级别"
        clearable
      >
        <el-option label="0(最低)" value="0" />
        <el-option label="1" value="1" />
        <el-option label="2" value="2" />
        <el-option label="3" value="3" />
        <el-option label="4" value="4" />
        <el-option label="5" value="5" />
        <el-option label="6" value="6" />
        <el-option label="7" value="7" />
        <el-option label="8" value="8" />
        <el-option label="9(最高)" value="9" />
      </el-select>
    </el-form-item>
    <el-form-item label="是否启用">
        <el-radio-group v-model="formInline.useable">
            <el-radio value="1">启用</el-radio>
            <el-radio value="0">禁用</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { reactive } from 'vue'

const formInline = reactive({
  name: '',
  role_type: '',
  data_scope: '',
  role_level:"",
  useable:"1"
})

const onSubmit = () => {
  axios({
    method:"post",
    url:"http://1.117.93.87:8000/rbacxie/api/Role/roleCreate",
    data:formInline
  })
  .then(res=>{
    if(res.data.code==200){
        ElMessage.success(res.data.message)
    }
    else if(res.data.code==400){
        ElMessage.error(res.data.message)
    }
    else{
        ElMessage.error(res.data.message)
    }
  })
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
